<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/*.blue-txt{
				color: cornflowerblue;
			}*/
			td{
				width: 250px;
			}
			.del{
				color: cornflowerblue;
				cursor: pointer;				
			}
		</style>
	</head>
	<body>
		<table border="1" id="table">
			<tr>
				<th width="200">
					序号
				</th>
				<th>
					姓名
				</th>
	            <th>
	            	班级
	            </th>
				<th>
					专业
				</th>
				<th>
					操作栏
				</th>
				<th>
					添加栏
				</th>
			<!--</tr>-->			
			<!--<tr>
				<td>
					1
				</td>
				<td>
					张三
				</td>
				<td>
					软件203
				</td>	
				<td>
					软件技术
				</td>
			</tr>			
			<tr>
				<td>
					2
				</td>
				<td>
					李四
				</td>
				<td>
					软件203
				</td>	
				<td>
					软件技术
				</td>
			<!--</tr>-->
		</table>
		<script type="text/javascript">
			window.onload = function (){
				let obj = [{
					id:1,
					name:'张三',
					className:'软件203',
					subject:'软件技术',
				},{
						id:2,
						name:'李四',
						className:'软件203',
						subject:'软件技术',
				},{	
				   		id:3,
				   		name:'李四1',
						className:'软件203',
						subject:'软件技术',
				}]
				
				let oriHtml = document.getElementById('table').innerHTML
				draw()
				
			function draw(){
				let strOri = document.getElementById('table').innerHTML
				
			
			for(let i=0;i<obj.length;i++){
				strOri +=`
				<tr>
					<td>
						${i+1}
					</td>
					<td>
						${obj[i].name}
					</td>
					<td>
						${obj[i].className}
					</td>	
					<td>
						${obj[i].subject}
					</td>
					<td>
						<span class="del" id="${obj[i].id}">
							删除
						</span>
					</td>
					<td>
						<span class="add" id="${obj[i].id}">
					</td>
				</tr>
				`
				}
			
				document.getElementById('table').innerHTML= strOri
				
				for (let i = 0; i < obj.length; i++) {
					document.getElementById(obj[i].id).onclick = function() {
						console.log(obj[i].id)
						// 根据id删除对象数据 - 过滤出来数据
						let newData = []
						for (let j = 0; j < obj.length; j++) {
							if(obj[j].id !== obj[i].id) {
								newData.push(obj[j])
							}
						}
						obj = newData
						draw()
					}
				}
			}
		}
//		<!--<span id="txt">11111</span>
//		<button id="changeRed">变红色</button>
//		<button id="changeBlue">变蓝色</button>
//		
//			window.onload = function(){
//				document.getElementById('changeRed').onclick = function(){
//					changeColor('red')	
//				}
//				document.getElementById('changeBlue').onClick = function(){
//					changeColor('blue')
//				}
//			
//				function changeColor(myColor){
//					document.getElementById('txt').innerHTML=`
//						ddocument.getelement
//			
//				}
					
//				oBtn.onclick = function(){
//					let txt=987
////					document.getElementById('txt').style.color='cornflowerblue'
//					document.getElementById('txt').innerHTML='2222'			
////					document.getElementById('txt').className='blue-txt'
//					document.getElementById('txt').innerHTML=`
//					<span id="txt">${txt+555}</span>
					
//		}	-->
	</script>
	</body>
</html>
